<!doctype html>
<html ng-app>
    <head>
        <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
        <script src="https://raw.github.com/timrwood/moment/1.7.2/min/moment.min.js"></script>
        <script src="http://localhost:8080/js/controllers.js"></script>
        <link rel="stylesheet" type="text/css" href="http://localhost:8080/css/main.css" />
    </head>
    <body ng-controller="BookListCtrl">
        <div id="header">Imke's boekenlijst</div>
        <div id="sidepanel">
            <div id="searchbox">
                <div>
                    Zoek een boek: <input ng-model="query">
                </div>
                Sorteer boekenlijst:
                <select ng-model="orderProp">
                    <option value="titles">titel</option>
                    <option value="purchaseDate">aankoopdatum</option>
                    <option value="authors[0].surname">(hoofd-) auteur</option>
                    <option value="genre">genre</option>
                </select>
                <p>Totaal aantal boeken: {{books.length}}</p>
            </div>

            <div ng-repeat="book in books | filter:query | orderBy:orderProp" class="book">
                <span ng-repeat="title in book.titles"><b>{{title}} </b></span>
                <br/> door: <span ng-repeat="author in book.authors">{{author.firstName}} {{author.surname}}, </span>
                <span ng-show="book.genre!=null"><br/> genre: {{book.genre}}</span>
                <br/> gekocht op: {{ book.purchaseDate }}
                <br/> <span class="comment" ng-repeat="comment in book.comments">{{comment}}<br/></span>
            </div>
        </div>
    </body>
</html>